<template>
      <el-aside width="220px" class="image-aside" v-loading="loading">
                <div class="top">
                   
                    <AsideList :active="activeId==item.id" v-for="(item,index) in list" :key="index" @edit="handleEdit(item) " @delete='handleDelete(item.id)' @click="handleChangeActiveId(item.id)">
                        {{item.name}}
                    </AsideList>
                </div>
                <!-- 分页区域 -->
                <div class="bottom">
                    <el-pagination background layout="prev, next"
                    :total="total" 
                    :current-page="currentPage"
                    :page-size="limit"
                    @current-change="getData"/>
                </div>
        </el-aside>

        <FormDrawer :title="drawerTitle" ref="formDrawerRef" @submit="handleSubmit">
            <!-- epf  注意form和ref的值需要不一致-->
            <el-form :model="form" ref="fromRef" :rules="rules" label-width="80px" :inline="false" >
                <!-- prop指定那个字段 -->
                <el-form-item label="分类名称" prop="name"> 
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="排序"  prop="order">
                    <el-input-number v-model="form.order" :min="0" :max="1000"
                     />
                </el-form-item>
            </el-form>
            
        </FormDrawer>
</template>
<script setup>
// 引入接口放
import{
    getImageClassList,
    createImageClass,
    updateImageClass,
    delectImageClass,
} from '~/api/image_class.js'
import FormDrawer from './FormDrawer.vue'
import AsideList from './AsideList.vue'
import {reactive, ref,computed } from 'vue'
import{
    toast
} from '~/composables/util.js'
//加载动画
const loading = ref(false)
const list = ref([])


//分页
const currentPage = ref(1) //当前分页的页码
const  total = ref(0) //总条数
const  limit = ref(10) //每页显示多少条

//获取数据方法,p页码
function getData(p = null){
    if(typeof p == 'number'){
        currentPage.value = p
    }
    // console.log(p);
    loading.value = true
    //没写分页默认第一页
    getImageClassList(currentPage.value)
    .then(res=>{
        total.value = res.totalCount
        list.value =res.list
        //获取第一个分类
        let item = list.value[0]
        if(item){
            // activeId.value = item.id
            //获取完列表之后获取数据
            handleChangeActiveId(item.id)
        }
        // console.log(res);
    })
    .finally(()=>{
        loading.value = false
    })
}

getData()
//判断属性
const drawerTitle = computed(()=>editId.value ? '修改':'新增')

const formDrawerRef = ref(null)


const form = reactive({
    name:'',
    order:50
})

const rules = {
    name: [

        //每一条单独验证规则都是一个对象
        {
            required: true, //表示此input是必填的
            message: '图库分类名称不能为空',
            trigger: 'blur' //触发事件-->失去焦点
        }

    ]
}
//触发验证获取表单的ref
const fromRef  = ref(null)
const handleSubmit = ()=>{
    console.log(fromRef.value)
    // console.log(提交表单);
    fromRef.value.validate((valid)=>{
        if(!valid)return
        formDrawerRef.value.showLoading()
        const fun = editId.value ? updateImageClass(editId.value,form):createImageClass(form)
        fun.then(res=>{
            toast(drawerTitle.value+'成功')
            //修改传递当前页，新增到第一页
            getData(editId.value?currentPage.value:1)
            //关闭弹框
            formDrawerRef.value.close()
        })
        .finally(()=>{
            formDrawerRef.value.hideLoading()
        })
        // console.log('提交成功');
    })
}

const editId = ref(0)
//打开表单抽屉,新增
const handleCreate = ()=>{
    editId.value = 0
    form.name = '',
    form.order = 50,
    formDrawerRef.value.open()
}

//编辑
const handleEdit = (row)=>{
    editId.value = row.id
    form.name = row.name
    form.order = row.order
    formDrawerRef.value.open()
}

//删除
const handleDelete = (id)=>{
    loading.value = true
   delectImageClass(id)
   .then(res=>{
    toast('删除成功')
    getData()
   })
   .finally(()=>{
    loading.value = false
   })   
}
//选中图库分类id
const activeId = ref(0)
const  emit = defineEmits(['change'])
//切换分类
function handleChangeActiveId(id){
    activeId.value = id
    //通知父组件
    emit('change',id)
}
// 暴露子组件的方法
defineExpose({
    handleCreate
})
</script>
<style>
.image-aside{
    border-right: 1px solid #eeeeee;
    position: relative;
}
.image-aside .top{
    position: absolute;
    top:0;
    right: 0;
    left: 0;
    bottom: 50px;
    /* 超出的部分自动滚动 */
    overflow: auto;
}
.image-aside .bottom{
    position: absolute;
    bottom: 0;
    height: 50px;
    left: 0;
    right: 0;
    @apply flex items-center justify-center;
}

</style>